<template>
	<view class="paypage">
		<view class="goodsList">
			<goods-list
				:goodsList="carsList"
				:totalPrice="totalPrice"
				:preferentialPrice="preferentialPrice"
			></goods-list>
		</view>
		<view class="payTabbar">
			<car-layout
				type="pay"
				:payBtnState="payBtnState"
				@confirmPay="onConfirmPay"
			></car-layout>
		</view>
	</view>
</template>

<script>
const addressCloudObj = uniCloud.importObject('my-mall-address');
const orderCloudObj = uniCloud.importObject('my-mall-order');
import { mapGetters, mapMutations } from 'vuex';
export default {
	data() {
		return {
			payLoading: true
		};
	},
	methods: {
		...mapMutations(['setCarList']),
		// 点击支付按钮
		async onConfirmPay() {
			this.payLoading = false;
			let obj = {
				deliveryInfo: this.deliveryInfo,
				carsList: this.carsList,
				totalPrice: this.totalPrice
			};

			let res = await orderCloudObj.createOrder(obj);
			if (res) {
				this.setCarList();
				uni.navigateTo({
					url: '/pages/order/order'
				});
			}
		}
	},
	computed: {
		...mapGetters(['carsList', 'totalPrice', 'preferentialPrice']),
		// 预约确认按钮状态
		payBtnState() {
			return this.carsList.length > 0 && this.totalPrice > 0 && this.payLoading;
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: $page-bg-color;
}
</style>
<style lang="scss" scoped>
.paypage {
	padding: 30rpx;
	.goodsList {
		margin-top: 30rpx;
	}
	.payTabbar {
		position: fixed;
		width: 100%;
		bottom: 0;
		left: 0;
	}
}
</style>
